<template>
  <div class="page-content">
    <div class="title">移动端装修</div>
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane label="首页装修" :name="1">
        <page-decoration-table v-if="activeName === 1"></page-decoration-table>
      </el-tab-pane>
      <el-tab-pane label="考试刷题页" :name="4">
        <exam-decoration-table v-if="activeName === 4"></exam-decoration-table>
      </el-tab-pane>
      <el-tab-pane label="个人中心" :name="2">
        <user-center-page-decoration-table
          v-if="activeName === 2"
        ></user-center-page-decoration-table>
      </el-tab-pane>
      <el-tab-pane label="底部导航栏" :name="3">
        <tab-bar-setting v-if="activeName === 3"></tab-bar-setting>
      </el-tab-pane>
    </el-tabs>

    <template-choose-dialog
      :show-template-dialog-visible="showTemplateDialogVisible"
      :page-value="pageValue"
      @close="showTemplateDialogVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import PageDecorationTable from '@/views/decoration/components/PageDecorationTable.vue'
  import ExamDecorationTable from './components/ExamDecorationTable.vue'
  import templateChooseDialog from './components/templateChooseDialog.vue'
  import UserCenterPageDecorationTable from './components/UserCenterPageDecorationTable.vue'
  import TabBarSetting from './components/TabBarSetting.vue'

  const activeName = ref(1)
  const showTemplateDialogVisible = ref(false)
  const pageValue = ref(0)
</script>

<style scoped lang="scss">
  .page-content {
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
</style>
